<!-- 多语言切换 -->
<template>
  <div class="lang">
    <el-popover :placement="placement" :width="160">
      <div class="c1">
        <el-button
          size="medium"
          @click="handleSetLanguage('zh')"
          :disabled="language == 'zh'"
          >中文
        </el-button>
      </div>
      <div class="c1">
        <el-button
          size="medium"
          @click="handleSetLanguage('en')"
          :disabled="language == 'en'"
          >English
        </el-button>
      </div>
      <template #reference>
        <div class="c7">
          <div v-if="language == 'zh'">En</div>
          <div v-if="language == 'en'">中</div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";

defineProps({
  placement: {
    type: String,
    default: "top",
  },
});

// 切换事件：
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const handleSetLanguage = (lang) => {
  locale.value = lang;
  language.value = lang;
  localStorage.setItem("lang", lang);
  location.reload();
};

//页面加载判断语言
const language = ref("");
onMounted(() => {
  if (
    localStorage.getItem("lang") == undefined ||
    localStorage.getItem("lang") == "zh"
  ) {
    language.value = "zh";
  } else {
    language.value = "en";
  }
});
</script>

<style lang="scss" scoped>
.lang {
  .c7 {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 40px;
    background: var(--el-color-primary);
    color: #fff;
    cursor: pointer;
  }
}
.c1 {
  margin: 5px auto;
}
.c1 .el-button {
  width: 100%;
}
</style>
